<template>
  <div ref="EcharRef" id="EcharRef" style="width: 100%; height: 100%"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import * as echarts from "echarts";
import { debounce } from "./mixins/debounce";
export default defineComponent({
  setup(props: any) {
    // echart节点
    const charts = ref<HTMLElement | null>(null);
    const chartData = [
      {
        // name: "数据统计量",
        type: "line",
            smooth: true,
            // lineStyle: {
            //     width: 1,
            //     color: "#0078FC",
            //     type: "solid",
            // },
            itemStyle: {
              normal: {
                color: "#0078FC",
                lineStyle: {
                  width: 1,
                  color: "#0078FC",
                },
              },
            },
            areaStyle: {
              opacity: 0.1,
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: "#1E5FF0",
            //     },
            //     {
            //       offset: 1,
            //       color: "#1E90FF",
            //     },
            //   ]),
            },
            emphasis: {
              focus: "series",
            },
        data: [120, 132, 101, 134, 90, 230, 210],
      }
    ];

    onMounted(() => {
      // 获取节点
      const myChart = echarts.init(
        document.getElementById("EcharRef") as HTMLElement
      );
      myChart.setOption({
        title: {
          text: "",
          show: false,
          left: "47%",
          textStyle: {
            fontSize: 24,
            color: "#E8E8E8",
          },
        },
        tooltip: {},

        grid: {
          top: "14%",
          left: "3%",
          right: "10%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          name: "",
          type: "category",
          boundaryGap: false, // 不留白，从原点开始
          axisLine: {
            show: true,
            lineStyle: {
              color: "#01D4F9",
              fontSize: "10",
              type: "solid",
              align: "left",
            },
          },
          nameLocation: "end", //坐标轴名称显示位置。
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            interval: 0,
            // rotate: "45",
          },
        },
        yAxis: {
          // name: '人次',
          type: "value",
          scale: true,
          splitNumber: 4,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#01D4F9",
              fontSize: "10",
              type: "solid",
            },
          },
          splitLine: {
            //分割线配置
            show: true,
            lineStyle: {
              color: "#196AFF",
              type: "dotted",
            },
          },
        },
        series: [...chartData],
      });
      window.addEventListener(
        "resize",
        debounce(() => {
          myChart.resize();
        })
      );
    });
    return {
      charts,
    };
  },
});
</script>
